<template>
	<view>
		<view class="listcard" @click="toDetail(item._id)">
			<view class="job">
				<view class="name">{{item.job}}</view>
				<view class="price">{{item.price}}</view>
			</view>
			<view class="content">
				<view class="company">
					<view class="name">{{item.company}}</view>
					<view class="num">{{item.company_size}}人</view>
				</view>

				<view class="label">
					<view class="labelson"  v-for="item in item.label">{{item.labelson}}</view>
				</view>
				<view class="detail">
					<image :src="item.cover" mode="aspectFill"></image>
					<view class="name">{{item.interviewer}}</view>
					<view class="address">{{item.address}}</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: "list-card",
		props:{
			item:{
				type: Object,
				default() {
					return {}
				}
			}
		},
		data() {
			return {

			};
		},
		methods:{
			toDetail(_id){
				console.log(_id)
				this.$u.route('pages/detail/detail',{id:_id})
			},
		}
	}
</script>

<style lang="scss">
	.listcard {
		padding: 10px;
		margin: 5px 10px 10px;
		border-radius: 10px;
		box-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: 0.1);
		box-sizing: border-box;
		height: 125px;
		border: 1px solid gray;
		background: $boss-base-color;

		.job {
			height: 28%;
			.name {
				position: absolute;
				font-size: 20px;
			}
			.price {
				float: right;
				// color: $boss-base-color;
			}
		}

		.content {
			height: 72%;
			position: relative;
			.company{
				display: flex;
				flex-direction: row;
				.name{
					
				}
				.num{
					margin-left: 10px;
					// color: $boss-base-color;
				}
			}
			
			.label{
				display: flex;
				flex-direction: row;
				height: 38%;
				
				.labelson{
					border-radius: 8px;
					background: gainsboro;
					margin: 3px 5px;
					padding: 0 8px;
					// padding: 2px;
				}
			}
			
			.detail{
				height: 48%;
				display: flex;
				flex-direction: row;
				image{
					flex-shrink: 0;
					border-radius: 50%;
					overflow: hidden;
					width: 30px;
					height: 30px;
					margin: 2px;
				}
				.name{
					margin-left: 10px;
					display: flex;
					align-items: center;
				}
				align-items: center;
				.address{
					position: absolute;
					right: 10px;
				}
			}
		}
	}
</style>